<template>
	<view class="mask">
		<u-popup v-model="regBool"  mode="center" :mask-close-able="false">
			<scroll-view scroll-y="true" class="scrollContent">
				<view class="mwrap">
					<view class="rules" @click="watchRules"></view>
					<image class="renge" mode="widthFix" :src="imgPath+'/static/big/selectTask.png'"></image>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="content">
						<view class="item" v-for="(item,index) in taskList">
							<image class="xuhao" mode="widthFix" :src="imgPath+'/static/big/teamCenter/workList/0'+(index+1)+'.png'"></image>
							<image class="kuang" @click="dagou(item.taskId)" mode="widthFix" :src="imgPath+'/static/big/teamList/kuang.png'"></image>
							<image class="dagou" @click="quxiaodagou(item.taskId)" v-if="taskIds.includes(item.taskId)" mode="widthFix" :src="imgPath+'/static/big/teamList/dagou.png'"></image>
							<image class="itemList" mode="widthFix" :src="imgPath+'/static/big/teamCenter/workList/work_'+item.taskId+'.png'"></image>
						</view>
					</scroll-view>
					<view class="cancel" @click="cancel"></view>
					<view class="confirm" @click="confirm"></view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>
<script>
	import http from "@/src/http";
	export default {
		name:"ChallengeList",
		data() {
			return {
				taskList:[],
				regBool:false,
				taskIds:[],
			}
		},
		methods:{
			confirm(){
				if(this.taskIds.length != 6){
					wx.showToast({
						icon: "none",
						title: '请选择6个任务提交',
					});
					return
				}
				http.teamVote({taskIds:this.taskIds}).then(res=>{
					console.log('initTasks',res)
				})
				this.regBool = false;
				this.$emit('success');
			},
			show(taskList){
				this.taskList = taskList;
				if(taskList.length==0){
					this.$u.toast('任务获取失败，请重新打开！');
				}
				this.$nextTick(()=>{
					this.regBool = true;
				})
			},
			cancel(){
				this.regBool = false
				this.getTask()
				this.$emit('cancel');
			},
			dagou(taskId){
				this.taskIds.push(taskId)
				if(taskId == 17){
					this.$emit('tips');
				}
			},
			quxiaodagou(taskId){
				let taskIdList = []
				taskIdList = this.taskIds.filter(elem=>{
					return elem != taskId
				})
				this.taskIds = taskIdList
			},
			watchRules(){
				// this.regBool = false
				//规则弹窗
				this.$emit('viewRules');
			}
		}
	}
</script>

<style lang="scss" scoped>
.scrollContent{
	width: 750rpx;
	height: 100vh;
}
.mwrap{
	width: 750rpx;
	// height: 1330rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.renge{
		width: 646rpx;
		position: relative;
	}
	.rules{
		position: absolute;
    z-index: 666;
    width: 100rpx;
    height: 100rpx;
    right: 40rpx;
    top: 190rpx;
	}
	.content{
		position: absolute;
    top: 383rpx;
    width: 461rpx;
    height: 823rpx;
    overflow: auto;
		.item{
			position: relative;
			height: 120rpx;
			.xuhao{
				width: 48rpx;
				position: absolute;
				z-index: 3;
				top: 14rpx;
				left: 0rpx;
			}
			.kuang{
				width: 44rpx;
				position: absolute;
				z-index: 3;
				top: 5rpx;
				left: 418rpx;
			}
			.dagou{
				width: 44rpx;
				position: absolute;
				z-index: 6;
				top: 5rpx;
				left: 418rpx;
			}
			.itemList{
				width: 420rpx;
				position: absolute;
				top: 0rpx;
				left: 25rpx;
			}
		}
	}
	.cancel{
		position: absolute;
    z-index: 666;
    width: 70rpx;
    height: 70rpx;
    left: 339rpx;
    border-radius: 35rpx;
    bottom: 18rpx;
	}
	.confirm{
		position: absolute;
    z-index: 666;
    width: 260rpx;
    height: 66rpx;
    left: 244rpx;
    border-radius: 33rpx;
    bottom: 106rpx;
	}
}

</style>